class MockVueSelect {
  constructor(container, options = [], placeholder = 'Select') {
    this.container = container;
    this.options = options;
    this.placeholder = placeholder;

    this.selectedValue = null;
    this.selectedLabel = '';
    this.tempValue = '';
    this.dropdownVisible = false;

    this._render();
    this._bindEvents();
    this._updateIcons();
  }

  _render() {
    this.container.classList.add('mock_vue_select');
    this.container.innerHTML = `
      <input type="text" class="mock_vue_select_input" placeholder="${this.placeholder}" readonly />
      <span class="mock_vue_icon_btn mock_vue_arrow_btn">
        ${this._getDownArrowSvg()}
      </span>
      <span class="mock_vue_icon_btn mock_vue_clear_btn">
        ${this._getCloseSvg()}
      </span>
      <div class="mock_vue_dropdown"></div>
    `;

    this.input = this.container.querySelector('.mock_vue_select_input');
    this.arrowBtn = this.container.querySelector('.mock_vue_arrow_btn');
    this.clearBtn = this.container.querySelector('.mock_vue_clear_btn');
    this.dropdown = this.container.querySelector('.mock_vue_dropdown');
  }

  _bindEvents() {
    this.container.addEventListener('mouseenter', () => this._updateIcons());
    this.container.addEventListener('mouseleave', () => this._updateIcons());

    this.input.addEventListener('click', () => this._toggleDropdown());
    this.input.addEventListener('input', () => this._renderOptions(this.input.value));
    this.input.addEventListener('blur', () => this._input_end());

    this.arrowBtn.addEventListener('click', () => this._toggleDropdown());

    this.clearBtn.addEventListener('click', (e) => {
      e.stopPropagation();
      this._clearSelection();
    });
  }

  _input_end() {
    console.log('Input ended');
    this.dropdown.classList.remove('visible');
    this.dropdownVisible = false;
    this.input.value = this.selectedLabel;
    this._updateIcons();
  }

  _toggleDropdown() {
    console.log('Toggling dropdown');
    this.dropdownVisible = !this.dropdownVisible;
    this.dropdown.classList.toggle('visible', this.dropdownVisible);

    if (this.dropdownVisible) {
      this.tempValue = this.selectedLabel;
      this.input.value = '';
      this.input.placeholder = this.tempValue || this.placeholder;
      this.input.readOnly = false;
      this.input.focus();
      this._renderOptions('');
    } else {
      this.input.readOnly = true;
      this.input.placeholder = this.tempValue || this.placeholder;
      this.input.value = this.tempValue;
    }

    this._updateIcons();
  }

  _renderOptions(filter = '') {
    this.dropdown.innerHTML = '';

    const filtered = this.options.filter(o =>
      o.label.toLowerCase().includes(filter.toLowerCase())
    );

    filtered.forEach(option => {
      const div = document.createElement('div');
      div.textContent = option.label;
      div.addEventListener('mousedown', () => {
        this.selectedValue = option.value;
        this.selectedLabel = option.label;
        this.input.value = this.selectedLabel;
        this.input.placeholder = this.placeholder;
        this.dropdown.classList.remove('visible');
        this.dropdownVisible = false;
        this.input.readOnly = true;
        this._updateIcons();
      });
      this.dropdown.appendChild(div);
    });
  }

  _updateIcons() {
    console.log(document.querySelector('.mock_vue_select').matches(':hover')); // 小心不是同一个 DOM 元素
    console.log('over and over')
    const hovering = this.container.matches(':hover');
    console.log(this.container);
    const hasSelection = !!this.selectedValue;

    if (hasSelection && hovering) {
      this.clearBtn.classList.add('show');
      this.arrowBtn.classList.remove('show');
    } else {
      this.clearBtn.classList.remove('show');
      this.arrowBtn.classList.add('show');


      const expectedDirection = this.dropdownVisible ? 'up' : 'down';
      const currentSvg = this.arrowBtn.querySelector('svg');
      const currentDirection = currentSvg?.getAttribute('data-direction');

      if (currentDirection !== expectedDirection) {
        this.arrowBtn.innerHTML = expectedDirection === 'up'
          ? this._getUpArrowSvg()
          : this._getDownArrowSvg();
      }


    }
  }

  _clearSelection() {
    this.selectedValue = null;
    this.selectedLabel = '';
    this.input.value = '';
    this.input.readOnly = true;
    this.input.placeholder = this.placeholder;
    this.dropdown.classList.remove('visible');
    this.dropdownVisible = false;
    this._updateIcons();
  }

  // === SVG Helpers ===

  _getDownArrowSvg() {
    return `
<svg data-direction="down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16" height="16">
  <path fill="currentColor" d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"/>
</svg>
    `.trim();
  }

  _getUpArrowSvg() {
    return `
<svg data-direction="up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16" height="16">
  <path fill="currentColor" d="M192.128 683.136 512 371.328l319.872 311.808a30.592 30.592 0 0 0 42.752 0 29.12 29.12 0 0 0 0-41.6L534.336 309.76a32 32 0 0 0-44.672 0L149.376 641.472a29.12 29.12 0 0 0 0 41.728 30.592 30.592 0 0 0 42.752 0z"/>
</svg>
    `.trim();
  }

  _getCloseSvg() {
    return `
<svg data-direction="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16" height="16">
  <path fill="currentColor" d="M557.248 512 796.16 273.088a32 32 0 0 0-45.248-45.248L512 466.752 273.088 227.84a32 32 0 0 0-45.248 45.248L466.752 512 227.84 750.912a32 32 0 0 0 45.248 45.248L512 557.248l238.912 238.912a32 32 0 0 0 45.248-45.248L557.248 512z"/>
</svg>
    `.trim();
  }
}
